<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<script>
/* doc > span */
const spanElem = document.createElement('span');
document.documentElement.appendChild(spanElem);

// span > #shadowRoot
const shadowRoot = spanElem.attachShadow({mode: 'open'});
shadowRoot.appendChild(document.createElement('span'));

// "Hello"
const textNode1 = document.createTextNode('Hello');
spanElem.appendChild(textNode1);

// div > select > option
const divElem = document.createElement('div');
divElem.innerHTML = "<select><option></select>";
spanElem.appendChild(divElem);

// Perform a layout.
divElem.offsetWidth;

// "World"
const textNode2 = document.createTextNode('World');
spanElem.appendChild(textNode2);

// Now we have:
/* doc 
 *   span
 *     #shadowRoot
 *       "Hello"  <-- REMOVE FIRST
 *       div > select > option   <-- REMOVE OPTION NEXT
 *       "World"
 */
textNode1.remove();

test(function(t) {
  document.querySelector("option").remove();
}, "Removing an option inside a shadow dom shouldn't crash");

</script>